<!--
 * @Description: three.js使用
 * @Author: wang_k
 * @Date: 2023-07-27 14:09:29
 * @LastEditTime: 2023-07-27 20:05:52
 * @FilePath: /demo_important/src/views/ThreeScene/index.vue
-->
<template>
  <div class="container">
    <div class="threes" ref="canvasContainer"></div>
    <cloudScene />
  </div>
</template>

<script>
import * as THREE from 'three';
import cloudScene from "./components/cloudScene.vue"
export default {
  components:{
    cloudScene
  },
  methods:{
    handleInit() {
      // 创建场景、相机和渲染器
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, this.$refs.canvasContainer.offsetWidth / this.$refs.canvasContainer.offsetHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(this.$refs.canvasContainer.offsetWidth, this.$refs.canvasContainer.offsetHeight);
    this.$refs.canvasContainer.appendChild(renderer.domElement);

    // 添加一个立方体到场景中
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    // 摄像机位置
    camera.position.z = 5;

    // 渲染场景
    function animate() {
      requestAnimationFrame(animate);
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render(scene, camera);
    }
    animate();
    }
  },
  mounted() {
    this.handleInit()
  }
};
</script>

<style>
.container {
  width: 100%;
  height: 100vh;
}
.threes {
  width: 100%;
  height: 100%;
}
</style>
